<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #tip {
            position: absolute;
            left: 0;
            top: 0;
            /* user-select: none; */
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div id="tip">进入厨房</div>
</body>
<script type="module">
    import * as THREE from "three";
    import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
    import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";

    const loader = new GLTFLoader();
    const clock = new THREE.Clock();

    //创建场景
    const scene = new THREE.Scene();
    // 添加环境光
    const ambientLight = new THREE.AmbientLight('#ffffff', 5);
    scene.add(ambientLight);

    // const size = 10;
    // const divisions = 10;

    // const gridHelper = new THREE.GridHelper(size, divisions, '#fc3f80', '#07c160');
    // scene.add(gridHelper);
    const axesHelper = new THREE.AxesHelper(100);
    scene.add(axesHelper);

    const dirLight = new THREE.DirectionalLight(0xFFFFFF, 5);
    // const helper = new THREE.DirectionalLightHelper(dirLight, 5);
    // dirLight.position.set(0, 2, 0);
    scene.add(dirLight);

    //创建相机
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

    camera.position.set(0, 0, 30)
    //创建渲染器
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 添加镜头轨道控制器
    const controls = new OrbitControls(camera, renderer.domElement);

    // //第一种实现方式
    // //创建立方体
    // const images = [
    //     '../images/image/left.png',
    //     '../images/image/right.png',
    //     '../images/image/top.png',
    //     '../images/image/bottom.png',
    //     '../images/image/front.png',
    //     '../images/image/back.png',
    // ]
    // let materials = [];
    // const textureLoader = new THREE.TextureLoader();
    // images.forEach((image) => {
    //     const texture = textureLoader.load(image);
    //     let material = new THREE.MeshBasicMaterial({
    //         map: texture
    //     })
    //     materials.push(material)
    // })

    // const Mesh = new THREE.Mesh(
    //     new THREE.BoxGeometry(40, 40, 40),
    //     materials
    // )
    // Mesh.geometry.scale(12,12,-12)
    // scene.add(Mesh)


    //第二种方式
    //创建球体
    const texture = new THREE.TextureLoader().load('../images/image/livingRoom.jpg');
    const geometry = new THREE.SphereGeometry(16, 32, 32);
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const sphere = new THREE.Mesh(geometry, material);
    sphere.geometry.scale(12, 12, -12)
    scene.add(sphere);

    //创建精灵图
    const map = new THREE.TextureLoader().load("../images/image/tip.png");
    const spritematerial = new THREE.SpriteMaterial({ map: map });

    const sprite = new THREE.Sprite(spritematerial);
    sprite.position.set(-100, 0, -80)
    sprite.scale.set(10, 10, 10);
    scene.add(sprite);

    const raycaster = new THREE.Raycaster();
    const pointer = new THREE.Vector2();

    const tip = document.getElementById("tip");
    let positionType = 'livingRoom'
    function onPointerMove(event) {
        pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
        pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
        // 通过摄像机和鼠标位置更新射线
        raycaster.setFromCamera(pointer, camera);

        // 计算物体和射线的焦点
        const intersects = raycaster.intersectObject(sprite);
        if (intersects.length > 0) {
            const worldpoint = new THREE.Vector3(
                intersects[0].object.position.x,
                intersects[0].object.position.y,
                intersects[0].object.position.z
            )
            const ndcPosition = worldpoint.project(camera);
            const left = (window.innerWidth / 2) * ndcPosition.x + window.innerWidth / 2;
            const top = -(window.innerHeight / 2) * ndcPosition.y + window.innerHeight / 2 - tip.clientHeight / 2;
            tip.style.left = left + "px";
            tip.style.top = top + "px";
            tip.style.display = 'block';
            tip.style.cursor = "pointer";
        } else {
            tip.style.display = "none";
        }
    }

    function onPointerDown(event) {
        pointer.x = (event.clientX / window.innerWidth) * 2 - 1;
        pointer.y = - (event.clientY / window.innerHeight) * 2 + 1;
        // 通过摄像机和鼠标位置更新射线
        raycaster.setFromCamera(pointer, camera);

        // 计算物体和射线的焦点
        const intersects = raycaster.intersectObject(sprite);
        if (intersects.length > 0) {
            if (positionType == 'livingRoom') {
                const changeTexture = new THREE.TextureLoader().load('../images/image/kitchen.jpg');
                sphere.material.map = changeTexture;
                sprite.position.set(-100, 0, 60);
                tip.innerText = '进入大厅';
                positionType = 'kitchen';
            } else {
                const changeTexture = new THREE.TextureLoader().load('../images/image/livingRoom.jpg');
                sphere.material.map = changeTexture;
                sprite.position.set(-100, 0, -80)
                tip.innerText = '进入厨房';
                positionType = 'livingRoom';    
            }

            const worldpoint = new THREE.Vector3(
                intersects[0].object.position.x,
                intersects[0].object.position.y,
                intersects[0].object.position.z
            )
            const ndcPosition = worldpoint.project(camera);
            const left = (window.innerWidth / 2) * ndcPosition.x + window.innerWidth / 2;
            const top = -(window.innerHeight / 2) * ndcPosition.y + window.innerHeight / 2 - tip.clientHeight / 2;
            tip.style.left = left + "px";
            tip.style.top = top + "px";
            tip.style.display = 'block';
            tip.style.cursor = "pointer";
        } else {
            tip.style.display = "none";
        }
    }

    renderer.domElement.addEventListener("mousemove", onPointerMove);
    renderer.domElement.addEventListener("mousedown", onPointerDown);

    //渲染场景
    function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera)
    }
    animate()

</script>

</html>